<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<style>
    .body_bg{
        background-image: url("./images/bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment:fixed;
    }
    .login-box{
        width: 29.42%;
        /*height: 58.33%;*/
        position: fixed;
        right: 8.85%;
        top: 23.98%;
    }
    .login-title{
        font-size:34px;
        font-family:SourceHanSansCN;
        font-weight:bold;
        color:rgba(67,156,255,1);
        line-height:48px;
    }
    .login-name{
        width:88%;
        height:14.28%;
        background:rgba(255,255,255,1);
        border-radius:6px;
    }
    .logo-title{
        font-size:26px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(0,71,157,1);
    }
    .logo{
        width: 54px;
        height: 58px;
    }
    .user{
        width: 31px;
        height: 35px;
    }
    input{
        background:none;
        outline:none;
        border:none;
        size: 24px;
        height: 80px;
    }
    .login-btn{
        width:87.96%;
        height:12.53%;
        background:rgba(67,156,255,1);
        border-radius:6px;
        color: #ffffff;
        font-size: 30px;
        line-height: 70px;
    }
    .forgotpassword{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:89px;
        opacity:0.6;
    }
    .footer{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:22px;
    }
    .sectionHeight{
        height: 700px
    }
    @media screen and (min-width: 1366px) and (max-width: 1600px) {
        .sectionHeight{
            height: 550px
        }
        .login-name {
            width: 88%;
            height: 50px;
            background: rgba(255,255,255,1);
            border-radius: 6px;
        }
        .user {
            width: 21px;
            height: 25px;
        }
        .login-btn {
            width: 87.96%;
            height: 50px;
            background: rgba(67,156,255,1);
            border-radius: 6px;
            color: #ffffff;
            font-size: 20px;
            line-height: 50px;
        }
        .login-title {
            font-size: 20px;
            font-family: SourceHanSansCN;
            font-weight: bold;
            color: rgba(67,156,255,1);
            line-height: 48px;
        }
    }
   /*565 630*/
</style>
<body class="body_bg">
    <header>
        <div class="logo-title row justify-center" style="margin-top: 4%">
            <img src="./images/logo.png" alt="" class="logo mb-1 mr-1">
            <span>山东速保智能科技有限公司</span>
        </div>
    </header>
    <section class="sectionHeight">
        <div>
            <div class="login-box column align-center">
                <div  class="login-title text-center mb-2">
                    <span>用户登录</span>
                </div>
                <div class="login-name row justify-center align-center ma-1">
                    <div style="width: 81px" class="text-center">
                        <img src="./images/user.png" alt="" class="user">
                    </div>
                    <div style="width: 100%">
                        <input type="text" placeholder="请输入账户">
                    </div>
                </div>
                <div class="login-name row justify-center align-center ma-1">
                    <div style="width: 81px" class="text-center">
                        <img src="./images/password.png" alt="" class="user">
                    </div>
                    <div style="width: 100%">
                        <input type="text" placeholder="请输入密码">
                    </div>
                </div>
                <div class="login-name row justify-center align-center ma-1">
                    <div style="width: 81px" class="text-center">
                        <img src="./images/code.png" alt="" class="user">
                    </div>
                    <div style="width: 100%">
                        <input type="text" placeholder="请输入验证码">
                    </div>
                </div>
                <div class="login-btn text-center mt-2">
                    登录
                </div>
                <div class="forgotpassword text-center">
                    忘记密码？
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div>
            <div class="footer text-center">
                ©2012-2020    江西省小查信息科技有限公司 版权所有   Copyright© All Right Reserved.<br>
                江西省通信管理局备案号：赣ICP备19002888号
            </div>
        </div>
    </footer>
</body>
</html>
